<template>
	<div class="container">
		<JxNavbar title="资金记录" />

		<div class="list">
			<div class='list-item uv-border-bottom' v-for="(item, index) in listData" :key="index">
				<div class='item-top'>
					<span>{{ item['plus_minus'] === 1 ? '收入' : '支出' }}</span>
					<span :class="item['plus_minus'] === 1 ? 'red' : 'green'">{{ item['plus_minus'] === 1 ? "+" : '' }}{{ item['variation'] }}</span>
				</div>
				<div class='item-bot'>
					<span>{{ item['comment'] }}</span>
					<span> {{ item['create_date'] }}</span>
				</div>
			</div>
		</div>

		<JxLoadMore :loadStatus='loadStatus' :list='listData' />
	</div>
</template>

<script setup>
	import { ref } from 'vue';
	import tools from '@/utils/tools/index.js'
	import JxNavbar from '@/components/navbar/index.vue'
	import JxLoadMore from '@/components/LoadMore/index.vue'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import user_money_logs from '@/api/user_money_logs/index.js'

	const page = ref(1);
	const listData = ref([]);
	const loadStatus = ref('loadmore')

	async function initData() {
		page.value = 1;
		tools.loading('page');
		listData.value = await getList();
		uni.hideLoading()
	}

	async function getList() {
		loadStatus.value = 'loading'
		const response = await user_money_logs.getList({ page: page.value, limit: 10 });
		if (response['code'] == 200) {
			const list = response['data'].map(item => {
				item['variation'] = tools.convertCentToYuan(item['variation']);
				item['create_date'] = tools.formatDate(item['create_date']);
				return item;
			});
			loadStatus.value = list.length < 10 ? 'nomore' : 'loadmore';
			return list;
		}
		return [];
	}

	onReachBottom(async () => {
		if (loadStatus.value === 'loadmore') {
			page.value++;
			const list = await getList();
			listData.value = listData.value.concat(list);
		}
	})

	onLoad((option) => {
		initData();
	})
</script>

<style lang="scss" scoped>
	.container {
		background: $uv-bg-color;

		.list {
			padding: 0 $side-width;

			.list-item {
				padding: $side-width;
				background: #fff;
				margin-top: $side-width;
				border-radius: 5px;

				.item-top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: $side-width;
					font-weight: 500;

					.red {
						color: red;
					}

					.green {
						color: green;
					}
				}

				.item-bot {
					display: flex;
					font-size: 28rpx;
					color: $uv-tips-color;
					align-items: center;
					justify-content: space-between;
				}
			}
		}
	}
</style>